<section class="sidebar-list" aria-label="Index and fields">
  <div ng-show="indexPatternList.length > 1">
    <ui-select
      class="index-pattern-selection"
      ng-model="selectedIndexPattern"
      on-select="setIndexPattern($item)"
    >
      <ui-select-match>
        <span
          class="uiSelectMatch--ellipsis"
          tooltip="{{$select.selected.get('title')}}"
          tooltip-append-to-body="true"
        >
          {{$select.selected.get('title')}}
        </span>
      </ui-select-match>
      <ui-select-choices repeat="pattern in indexPatternList | filter:$select.search">
        <div ng-bind-html="pattern.get('title') | highlight: $select.search"></div>
      </ui-select-choices>
    </ui-select>
  </div>
  <div ng-hide="indexPatternList.length > 1">
    <div class="index-pattern">
      <h2
        class="index-pattern-label"
        id="index_pattern_id"
        tabindex="0"
        css-truncate>

        {{ indexPattern.title }}</h2>
    </div>
  </div>

  <div class="discover-sidebar-list-header sidebar-list-header">
    <h3 class="sidebar-list-header-label" id="selected_fields" tabindex="0">Selected Fields</h3>
  </div>
  <ul class="list-unstyled discover-selected-fields" >
    <discover-field
      ng-repeat="field in fields.raw|filter:{display:true}"
      field="field"
      on-add-field="onAddField"
      on-add-filter="onAddFilter"
      on-remove-field="onRemoveField"
      on-show-details="computeDetails"
    >
    </discover-field>
  </ul>

  <div class="sidebar-list-header sidebar-item euiFlexGroup euiFlexGroup--gutterMedium">
    <h3 class="euiFlexItem sidebar-list-header-label" id="available_fields" tabindex="0">
      Available Fields
    </h3>

    <div class="euiFlexItem euiFlexItem--flexGrowZero">
      <button
        ng-click="showFields = !showFields"
        aria-hidden="true"
        class="kuiButton kuiButton--small visible-xs visible-sm pull-right field-collapse-toggle"
      >
        <span
          aria-hidden="true"
          class="kuiIcon"
          ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
        ></span>
      </button>
    </div>
    <div class="euiFlexItem euiFlexItem--flexGrowZero">
      <button
        type="button"
        ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
        class="kuiButton kuiButton--small pull-right discover-field-filter-toggle"
        ng-click="showFilter = !showFilter"
        aria-label="{{showFilter ? 'Hide' : 'Show'}} field settings"
        aria-expanded="{{!!showFilter}}"
        aria-controls="discoverFieldFilter"
      >
        <span aria-hidden="true" class="kuiIcon fa-gear"></span>
      </button>
    </div>
  </div>

  <div class="sidebar-item discover-field-details" ng-show="showFilter" id="discoverFieldFilter">
    <form role="form">
      <div class="form-group">
        <label for="discoverFieldChooserFilterAggregatable">
          Aggregatable
        </label>
        <select
          id="discoverFieldChooserFilterAggregatable"
          ng-options="opt.value as opt.label for opt in filter.boolOpts"
          ng-model="filter.vals.aggregatable"
          class="form-control">
        </select>
      </div>
      <div class="form-group">
        <label for="discoverFieldChooserFilterSearchable">
          Searchable
        </label>
        <select
          id="discoverFieldChooserFilterSearchable"
          ng-options="opt.value as opt.label for opt in filter.boolOpts"
          ng-model="filter.vals.searchable"
          class="form-control">
        </select>
      </div>
      <div class="form-group">
        <label for="discoverFieldChooserFilterType">
          Type
        </label>
        <select
          id="discoverFieldChooserFilterType"
          ng-options="field as field for field in fieldTypes"
          ng-model="filter.vals.type"
          class="form-control">
        </select>
      </div>
      <div class="form-group">
        <label for="discoverFieldChooserFilterFieldName">
          Field name
        </label>
        <input
          id="discoverFieldChooserFilterFieldName"
          type="text"
          class="form-control"
          ng-model="filter.vals.name"
        >
      </div>
      <div class="form-group">
        <label for="discoverFieldChooserHideMissingFields">
          <input id="discoverFieldChooserHideMissingFields" type="checkbox" ng-model="filter.vals.missing">
          Hide Missing Fields
        </label>
      </div>
      <button
        ng-click="filter.reset()"
        ng-disabled="!filter.active"
        class="kuiButton kuiButton--danger kuiButton--fullWidth"
      >
        Reset Filters
      </button>
    </form>
  </div>

  <ul
    ng-show="(popularFields | filter:filter.isFieldFiltered).length > 0"
    ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields }"
    class="list-unstyled sidebar-well discover-popular-fields">
    <li class="sidebar-item sidebar-list-header">
      <h6>Popular</h6>
    </li>
    <discover-field
      ng-repeat="field in popularFields | filter:filter.isFieldFiltered"
      field="field"
      on-add-field="onAddField"
      on-add-filter="onAddFilter"
      on-remove-field="onRemoveField"
      on-show-details="computeDetails"
    >
    </discover-field>
  </ul>

  <ul
    ng-class="{ 'hidden-sm': !showFields, 'hidden-xs': !showFields  }"
    class="list-unstyled discover-unpopular-fields">
    <discover-field
      ng-repeat="field in unpopularFields | filter:filter.isFieldFiltered"
      field="field"
      on-add-field="onAddField"
      on-add-filter="onAddFilter"
      on-remove-field="onRemoveField"
      on-show-details="computeDetails"
    >
    </discover-field>
  </ul>

</section>
